<!--
 @description 复查确认
 @fileName Review.vue
 @author zengqiongying
 @created 2023/06/14 13:34:56
-->
<template>
  <Popup v-model="showPop" title="复查确认" buttonType="text" @confirm="onConfirm" @cancel="onCancel">
    <div class="pad16">
      <div class="sub-title">确认复查任务信息，请确认生成任务</div>
      <div class="basic-info">
        <div class="item">
          <span>门店SAD</span>
          <div class="value">{{ baseInfo.sadAddress || '--' }}</div>
        </div>
        <div class="item">
          <span>门店名称</span>
          <div class="value">{{ baseInfo.stroeName || '--' }}</div>
        </div>
        <div class="item">
          <span>门店编码</span>
          <div class="value">{{ baseInfo.storeCode || '--' }}</div>
        </div>
        <div class="item">
          <span>总面积</span>
          <div class="value">{{ toThousands(baseInfo.totalArea) }}m²</div>
        </div>
        <div class="item">
          <span>验收面积</span>
          <div class="value">{{ toThousands(baseInfo.acceptArea) }}m²</div>
        </div>
      </div>
      <div class="field-cell">
        <div class="title">验收人员</div>
        <Cell
          cellClassName="item-field"
          :modelValue="userName"
          placeholder="请选择对应人员"
          valueAlign="left"
          @right="onSearchYsUser"
        />
      </div>
    </div>
  </Popup>
</template>

<script lang="ts">
  import Popup from '@/components/Popup/index.vue'
  import Cell from '@/components/Cell/index.vue'
  import { reactive, toRefs, getCurrentInstance, computed, nextTick, defineComponent } from 'vue'
  import { useRouter } from 'vue-router'
  import { toThousands } from '@/utils'
  import { acceptReview } from '@/apis/Task'
  export default defineComponent({
    name: 'TaskReview',
    components: { Popup, Cell },
    props: {
      baseInfo: {
        type: Object,
        default: () => {}
      },
      show: {
        type: Boolean,
        default: false
      }
    },
    emits: ['success', 'update:show'],
    setup(props, { emit }) {
      const instance = getCurrentInstance()
      const { proxy }: any = instance
      const $router = useRouter()

      const datas = reactive({
        showPop: true,
        userList: []
      })
      const showPop = computed({
        set(val) {
          emit('update:show', val)
        },
        get() {
          return props.show
        }
      })

      const userName = computed(() => {
        return datas.userList.map((v: any) => v.userName).join(',')
      })
      // 选择验收人员
      const onSearchYsUser = () => {
        const emitFuncName = 'TaskReviewSetYsUser'
        proxy.$SimpleEvents.registerEvent(emitFuncName, (data: any) => {
          onChangeYsUser(data)
        })
        $router.push({
          path: '/search/sasUser',
          query: {
            name: emitFuncName
          }
        })
      }
      const onChangeYsUser = (d: any) => {
        datas.userList = d.map((v: any) => {
          return {
            userID: v.userID,
            userName: v.userName
          }
        })
      }
      const onConfirm = () => {
        const caid = props.baseInfo?.caid || ''
        acceptReview(caid, datas.userList).then((res: any) => {
          proxy.$toast('复查任务发起成功')
          nextTick(() => {
            showPop.value = false
            // 复查操作成功后，原单数据不会有任何变化，所有不再操作列表刷新
            // proxy.$SimpleEvents.emit('refreshTaskItem', caid)
            // proxy.$SimpleEvents.emit('refreshTaskList')
            datas.userList = []
            emit('success', caid)
          })
        })
      }
      const onCancel = () => {
        datas.userList = []
      }

      return {
        ...toRefs(datas),
        showPop,
        userName,
        onSearchYsUser,
        toThousands,
        onConfirm,
        onCancel
      }
    }
  })
</script>
<style lang="less" scoped>
  .pad16 {
    padding: 0 16px 24px;
  }
  .sub-title {
    font: var(--font-main-body);
    text-align: center;
    color: var(--texticon-default-strong);
    margin-bottom: 16px;
  }
  .basic-info {
    padding: 16px 0;
    font: var(--font-main-body);
    color: var(--texticon-default-stronger);
    .item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 4px;
      min-height: 20px;
      .value {
        flex: 1;
        margin-left: 10px;
        text-align: right;
      }
    }
  }
  .field-cell {
    .title {
      font: var(--font-main-body);
      color: var(--texticon-default-stronger);
      margin-bottom: 16px;
    }
    .item-field {
      background: var(--input-bg-disable);
      border: 1px solid var(--input-line-active);
      border-radius: var(--radius-xl);
    }
  }
</style>
